<template>
  <!-- 纵向柱状图 -->
  <!-- style="width: 100%; height: 100%" -->
  <div ref="oneLeft" class="DoublePortait" />
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "DoublePortait",
  props: {
    /** 底边栏数组 */
    chartData: {
      type: Array,
      require: true,
    },
    /** 报送数组 */
    submissionList: {
      type: Array,
      require: true,
    },
    /** 审核通过数组 */
    auditList: {
      type: Array,
      require: true,
    },
    /** 总计报送 */
    truecount: {
      type: Number,
      default: 5,
    },
    /** 总计审查通过 */
    allcount: {
      type: Number,
      default: 10,
    },
    /** 内框默认颜色 */
    color: {
      type: String,
      default: "#4284ce",
    },
    textColor: {
      type: String,
      default: "#848484",
    },
    /** 是否显示标题 */
    titleshow: {
      type: Boolean,
      default: true,
    },
    /** 柱子宽度 */
    barWidth: {
      type: String,
      default: "10%",
    },
    /** 颜色数组 */
    colorData: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: ["#4284ce", "#6badf8"],
    },
    /** 标题数组 */
    nameData: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: ["报送", "审核通过"],
    },
    /** 数值数组 */
    seriesData: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: [
        [120, 200, 150, 80, 70, 110, 130, 80, 56, 80],
        [120, 200, 150, 80, 70, 110, 130, 80, 56, 80],
      ],
    },
    /** 拖动条 */
    dataZoomShow: {
      type: Boolean,
      default: false,
    },
    top: {
      type: String,
      default: "18%",
    },
    bottom: {
      type: String,
      default: "2%",
    },
    legendtop: {
      type: Number,
      default: 18,
    },
  },
  data() {
    return {
      chart: null,
      // 柱状图配置项
      scoreOption: {},
    };
  },
  destroyed() {
    window.removeEventListener("resize", this.onResize);
    window.onresize = null;
  },
  mounted() {
    this.draw();
    this.$nextTick(() => {
      //   this.initChart()
      this.chart.resize();
      this.chart = echarts.init(this.$el, "macarons");
      let self = this;
      let chart = this.chart;
      chart.on("click", (params) => {
        console.log(params);
        //负组件调用可以接收传值
        self.$emit("getBar", params);
      });
    });
  },
  methods: {
    draw() {
      console.log(11, this.chartData, this.lengthData);
      const submissionList = this.submissionList;
      this.chart = echarts.init(this.$refs.oneLeft);
      this.scoreOption = {
        backgroundColor: "#fff", // 背景颜色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          show: this.titleshow,
          text: "-",
          subtext: `总计(报送:${this.allcount} 审查通过:${this.truecount})`,
          x: "58%",
          y: "-13%",
          textStyle: {
            color: "#848484",
            fontSize: "22",
          },
          subtextStyle: {
            color: "#848484",
            fontSize: "16",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: this.bottom,
          top: this.top,
          containLabel: true,
        },
        calculable: true,
        legend: {
          data: this.nameData,
          right: 10,
          top: this.legendtop,
          textStyle: {
            color: "#848484", // 右上角文字颜色
          },
          itemWidth: 12,
          itemHeight: 12,
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          axisTick: true, // 隐藏刻度代码
          data: this.chartData,
          axisLine: {
            lineStyle: {
              color: "#848484", // 底部文字颜色
            },
          },
          axisLabel: {
            interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          // splitNumber: 20,
          max: "1200", // 最大值
          axisLine: {
            show: false,
            // alignWithLabel: true,
            // inside: true,
            // lengt: 6,
            lineStyle: {
              color: this.textColor, // 左侧坐标轴数字颜色
            },
          },
          axisPointer: {
            type: "none",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", // 横线样式-虚线
              color: "#eee", // 横线颜色
            },
          },
        },
        dataZoom: [
          {
            show: this.dataZoomShow,
            height: 12,
            start: 0,
            end: 60,
            // xAxisIndex: [0],
            handleSize: 0, // 滑动条的 左右2个滑动条的大小
            left: "5%", // 左边的距离
            right: "5%", // 右边的距离
            bottom: 0, // 右边的距离
            borderColor: "none",
            fillerColor: "rgb(229,229,229)",
            borderRadius: 5,
            backgroundColor: "rgba(229, 229, 229, .36)", // 两边未选中的滑动条区域的颜色
            showDataShadow: false, // 是否显示数据阴影 默认auto
            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
            textStyle: {
              fontSize: 0,
            },
            // endValue: , // 从0开始的相当于5个
            borderWidth: 0,
            handleStyle: {
              color: "#d3dee5",
            },
          },
          // {
          //   type: 'inside',
          //   show: false,
          //   height: 15,
          //   start: 1,
          //   end: 35
          // }
        ],
        series: [
          {
            name: this.nameData[0],
            type: "bar",
            barWidth: this.barWidth,
            barCategoryGap: "10%",
            itemStyle: {
              normal: {
                color: this.colorData[0],
                barBorderRadius: 2,
              },
            },
            data: submissionList || this.seriesData[0],
          },
          {
            name: this.nameData[1],
            type: "bar",
            barWidth: this.barWidth,
            barCategoryGap: "10%",
            itemStyle: {
              normal: {
                color: this.colorData[1],
                barBorderRadius: 2,
              },
            },
            data: this.auditList || this.seriesData[1],
          },
          {
            show: this.nameData[2],
            name: this.nameData[2],
            type: "bar",
            barWidth: this.barWidth,
            barCategoryGap: "10%",
            itemStyle: {
              normal: {
                color: this.colorData[2],
                barBorderRadius: 2,
              },
            },
            data: this.seriesData[2],
          },
        ],
      };

      this.chart.setOption(this.scoreOption);
      window.addEventListener("resize", this.onResize);
    },
    onResize() {
      this.chart.resize();
    },
  },
};
</script>
  <style scoped>
.DoublePortait {
  width: 100%;
  height: 100%;
}
</style>

